<template>
  <view class="order-detail-container container uni-py-4">
    <uni-card class="uni-px-7 uni-mb-6">
      <view class="status-card card uni-my-6">
         <text class="bi bi-box-seam "></text> <text class="mb-0 uni-mr-5"> 订单详情</text>

        <view class="card-body">
          <view class="d-flex align-items-center">
          
            <view class="uni-mr-5">
              <text class="mb-1">{{ getStatusText(order.status) }}</text>
              <text class="text-muted mb-0">{{
                getStatusDescription(order.status)
              }}</text>
            </view>
          </view>
        </view>
      </view>
    </uni-card>

    <!-- 收货信息 -->
    <uni-card class="card uni-mb-6">
      <view class="card-body">
        <text class="card-title uni-my-5">
          <text class="bi bi-geo-alt "></text>收货信息
        </text>
        <view class="address-info">
          <text class="uni-my-5">
            <strong>{{ order.address.name }}</strong>
            <text class="uni-mr-5">{{ order.address.phone }}</text>
          </text>
          <text class="">
            {{ order.address.province }}{{ order.address.city
            }}{{ order.address.district }}
            {{ order.address.detail }}
          </text>
        </view>
      </view>
    </uni-card>

    <!-- 商品信息 -->
    <uni-card class="card uni-mb-6">
      <view class="card-body">
        <view class="card-title uni-my-5">
          <text class="bi bi-bag "></text>商品信息
        </view>
        <view class="product-list">
          <view
            v-for="item in order.items"
            :key="item.id"
            class="justify-content-between    d-flex align-items-center uni-my-5"
          >
            <image
              :src="url('s', item.image, 'png')"
              :alt="item.name"
              class="product-image"
            ></image>
            <view class="product-info uni-mr-5">
              <text class="mb-1">{{ item.name }}</text>
              <text class="text-muted mb-0">{{ item.specs }}</text>
            </view>
            <view class="product-price text-end">
              <view class="text-danger">¥ {{ item.price.toFixed(2) }}</view>
              <text class="text-muted">x{{ item.quantity }}</text>
            </view>
          </view>
        </view>
      </view>
    </uni-card>

    <!-- 订单信息 -->
    <uni-card class="card uni-mb-6">
      <view class="card-body">
        <text class="card-title uni-my-5">
          <text class="bi bi-info-circle "></text>订单信息
        </text>
        <view class="order-info">
          <view class="info-item d-flex justify-content-between uni-my-5">
            <text class="text-muted">订单编号：</text>
            <text>{{ order.orderNo }}</text>
          </view>
          <view class="info-item d-flex justify-content-between uni-my-5">
            <text class="text-muted">创建时间：</text>
            <text>{{ order.createTime }}</text>
          </view>
          <view class="info-item d-flex justify-content-between uni-my-5">
            <text class="text-muted">支付方式：</text>
            <text>{{ order.paymentMethod }}</text>
          </view>
        </view>
      </view>
    </uni-card>

    <!-- 金额信息 -->
    <uni-card class="card uni-mb-6">
      <view class="card-body">
        <text class="card-title uni-my-5">
          <text class="bi bi-currency-yen "></text>金额信息
        </text>
        <view class="amount-info">
          <view class="d-flex justify-content-between uni-my-5">
            <text>商品总额</text>
            <text>¥ {{ order.totalAmount.toFixed(2) }}</text>
          </view>
          <view class="d-flex justify-content-between uni-my-5">
            <text>运费</text>
            <text>¥ {{ order.shipping.toFixed(2) }}</text>
          </view>
          <view class="d-flex justify-content-between uni-my-5">
            <text>优惠金额</text>
            <text class="text-danger">-¥ {{ order.discount.toFixed(2) }}</text>
          </view>
          <view class="d-flex justify-content-between total-amount">
            <text>实付金额</text>
            <text class="text-danger"
              >¥
              {{
                (order.totalAmount + order.shipping - order.discount).toFixed(2)
              }}</text
            >
          </view>
        </view>
      </view>
    </uni-card>

    <!-- 底部操作按钮 -->
    <view class="action-footer">
      <button
        v-show="order.status === 'pending'"
        type="primary"
class="w-100" 
        @click="cancelOrder"
      >
        取消订单
      </button>
      <button class="w-100" type="warn" @click="handleMainAction">
        {{ getActionText(order.status) }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";


const url = $url;
const router = useRouter();
const route = useRoute();

// 示例订单数据
const order = ref({
  id: 1,
  orderNo: "DD20240115001",
  status: "pending",
  createTime: "2024-01-15 15:30",
  paymentMethod: "微信支付",
  address: {
    name: "张三",
    phone: "13800138000",
    province: "江西省",
    city: "南昌市",
    district: "青山湖区",
    detail: "高新大道999号",
  },
  items: [
    {
      id: 1,
      name: "傩韵手机壳",
      specs: "iPhone 14",
      quantity: 1,
      price: 39.9,
      image: "1",
    },
  ],
  totalAmount: 39.9,
  shipping: 10,
  discount: 5,
});

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    pending: "待付款",
    unpaid: "待发货",
    shipping: "待收货",
    review: "待评价",
    completed: "已完成",
    cancelled: "已取消",
  };
  return statusMap[status] || status;
};

// 获取状态描述
const getStatusDescription = (status) => {
  const descMap = {
    pending: "请在24小时内完成支付，超时订单将自动取消",
    unpaid: "商家正在处理您的订单，请耐心等待",
    shipping: "商品正在配送中，请保持手机畅通",
    review: "商品已签收，期待您的评价",
    completed: "交易已完成",
    cancelled: "订单已取消",
  };
  return descMap[status] || "";
};

// 获取操作按钮文本
const getActionText = (status) => {
  const actionMap = {
    pending: "立即付款",
    unpaid: "提醒发货",
    shipping: "确认收货",
    review: "去评价",
    completed: "再次购买",
    cancelled: "删除订单",
  };
  return actionMap[status] || "查看详情";
};

// 取消订单
const cancelOrder = () => {
  MessagePlugin.warning({
    content: "确定要取消该订单吗？",
    theme: "warning",
    closeBtn: true,
    onConfirm: () => {
      // 实现取消订单逻辑
      MessagePlugin.success("订单已取消");
      router.back();
    },
  });
};

// 主要操作按钮处理
const handleMainAction = () => {
  switch (order.value.status) {
    case "pending":
      // 跳转到支付页面
      break;
    case "shipping":
      // 确认收货
      break;
    case "review":
      // 跳转到评价页面
      break;
    default:
      break;
  }
};

// 获取订单详情
onMounted(() => {
  const orderId = route.params.id;
  // 根据orderId获取订单详情
  console.log("获取订单详情:", orderId);
});
</script>

<style scoped>
.status-icon {
  font-size: 2rem;
  color: var(--td-brand-color);
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.total-amount {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.action-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  z-index: 100;
}

@media (max-width: 768px) {
  .order-detail-container {
    padding-bottom: 80px;
  }

  .product-info {
    max-width: 40%;
  }
}
</style>
